<template>
  <main class="loginPage">
    <LoginBg></LoginBg>
    <div class="loginPageInner">
      <h1>{{ title }}</h1>
      <!--    -->
      <div class="loginBox">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            label="用户名"
            name="username"
            :rules="[{ validator: validateUserName }]"
          >
            <a-input v-model:value="formState.username" />
          </a-form-item>

          <a-form-item
            label="密码"
            name="password"
            :rules="[{ validator: validatePassword }]"
          >
            <a-input-password v-model:value="formState.password" />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">Submit</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import LoginBg from '@/components/LoginBg.vue'
import { validateUserName, validatePassword } from './loginValidate'
import { doLogin } from '@/api/login'
import { message } from 'ant-design-vue'
import { saveLoginInfo } from './saveLoginInfo'

import { useRouter } from 'vue-router'

const router = useRouter()

interface FormState {
  username: string
  password: string
}
let title = import.meta.env.VITE_TITLE

const formState = reactive<FormState>({
  username: '16637142550',
  password: '123456'
})
const onFinish = (values: FormState) => {
  doLogin(formState).then((res: any) => {
    if (res.code == 0) {
      message.success(res.msg)

      saveLoginInfo(res).then((res) => {
        router.replace('/')
      })
    }
  })
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
</script>

<style>
.loginPage {
  height: 100vh;
  position: relative;
}
.loginPageInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 996;
}
.loginPage h1 {
  text-align: center;
  margin: 100px 0;
}

.loginBox {
  width: 380px;
  height: auto;
  margin: 0 auto;
}
</style>
